import React, { Component, PureComponent } from 'react'
import { Link } from "react-router-dom";
import '@/css/Gamble.css';

import { CSSTransition, TransitionGroup } from 'react-transition-group';


import MyModel from '@/comps/MyModel'
import GambleDashboard from '@/comps/gamble/GambleDashboard.js'
import GambleStatistics from '@/comps/gamble/GambleStatistics.js'



export default class Gamble extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isStateModelShow: false,
      rate:0.6
    }
  }
  componentDidMount() {

  }
  componentWillUnmount() {

  }



  componentDidMount() {   
  
  }
// 你只要一直玩下去，你所拥有的一切就都是我的了
  // componentWillReceiveProps(nextProps) {
  //   this.setState({
  //     isStateModelShow: nextProps.isModelShow
  //   })
  // }

  render() {
    let { isStateModelShow } = this.state
    return (
      <div>
        <GambleStatistics rate={this.state.rate}></GambleStatistics>

        <div className="gamble-section">
          <div className="gamble-over-time">2020-03-12</div>
          <div className="gamble-name">上证指数</div>
          <div className="yt yt-bm yt-pj gamble-item-wrap">
            <div className="yt yt-pj gamble-item" onClick={() => { this.setState({ isStateModelShow: true }) }}>
              <div>单</div>
              <div className="gamble-item-num-color">1.91</div>
            </div>
            <div className="yt yt-pj gamble-item">
              <div>双</div>
              <div className="gamble-item-num-color">1.69</div>
            </div>
          </div>
        </div>


        <div className="gamble-section">
          <div className="gamble-over-time">2020-03-12 15:00</div>
          <div className="gamble-name">上证指数</div>
          <div className="yt yt-bm yt-pj gamble-item-wrap">
            <div className="yt yt-pj gamble-item">
              <div>范围(0-4)</div>
              <div className="gamble-item-num-color">2.00</div>
            </div>
            <div className="yt yt-pj gamble-item">
              <div>范围(5-9)</div>
              <div className="gamble-item-num-color">1.25</div>
            </div>
          </div>
        </div>





        {/* 腾讯版下注界面
        <div className="gamble-wrap">
          <div className="gamble-title">上证指数 涨还是跌?</div>
          <div className="gamble-meta-time">竞猜1月21日上证指数涨跌</div>
          <div className="gamble-progress"><div className="gamble-progress-up"></div></div>
          <div className="yt yt-pj gamble-updown">
            <div className="gamble-up">58%用户看涨</div>
            <div className="gamble-down">42%用户看跌</div>
          </div>
          <div className="yt yt-pja gamble-bets">
            <button className="bets-btn" onClick={() => { this.setState({ isStateModelShow: true }) }}>看涨</button>
            <button className="bets-btn bets-down">看跌</button>
          </div>
        </div> */}
        <MyModel isModelShow={isStateModelShow} >
          <GambleDashboard />
        </MyModel>
      </div>
    )
  }


}
